<template>
	<div id="index">
		<div class="index_top">
			<div id="login">
				<div v-if="userInfo==null">
					<a @click="login" href="javascript:void(0)">登录</a>&nbsp;
					<a>|</a>&nbsp;
					<a @click="reg" href="javascript:void(0)">注册</a>
				</div>
				<div v-else-if="userInfo!=null">
					<span class="login_userInfo" @click="toUserInfo">
						{{userInfo.nickName}}
					</span>
					&nbsp;|&nbsp;
					<a @click="out" href="javascript:void(0)">退出</a>
				</div>
			</div>
			<img class="logo" src="../../../static/img/mammoth-logo.png" />
		</div>
		<div class="index_middle">
			<div id="nav">
				<div><router-link to="/home" @click.native='hiden'>解忧杂货铺</router-link></div>
				<div><router-link to="/work" @click.native='hiden'>发表文章</router-link></div>
				<div><router-link to="/blog" @click.native='hiden'>解忧博客</router-link></div>
			</div>
		</div>
		<div class="index_bottom">
			<div class="note">
				解忧杂货铺
			</div>
			<div class="note">
				2018/08/28
			</div>
		</div>
	</div>
</template>

<script type="application/ecmascript-6">
export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
    toUserInfo: function() {
      var url = location.href.endsWith("/mydata");
      if (url) {
        return;
      }
      this.$router.push("/home/info");
    },
    login: function() {
      this.$store.commit("showLogin", true);
      this.$store.commit("showReg", false);
    },
    reg: function() {
      this.$store.commit("showLogin", false);
      this.$store.commit("showReg", true);
    },
    out: function() {
      //获取当前路径 如果是work 就回到 home
      var url = location.href;
      localStorage.removeItem("token");
      this.$store.commit("showUserInfo", null);
      this.$message({
        message: "操作成功",
        type: "success"
      });
      if (url.endsWith("work")) {
        this.$router.push("/home");
        return;
      }
    },
    hiden: function() {
      this.$store.commit("hidenLR");
    }
  },
  computed: {
    userInfo: function() {
      var tokenData = localStorage.getItem("token");
      var jsonO = JSON.parse(tokenData);
      var ui = this.$store.getters.getUserInfo
        ? this.$store.getters.getUserInfo
        : jsonO
          ? jsonO.userInfo
          : null;
      this.$store.commit("showUserInfo", ui);
      return ui;
    }
  }
};
</script>

<style lang="stylus" rel="stylesgeet/stylus">

.login_userInfo:hover
	cursor:pointer
.index_top,.index_middle,.index_bottom
	min-height:33vh
	width:100%
	a
		color:#fff
.index_top
	/*background-color:#fad*/
	.logo
		margin-top:70px
		margin-left: 40% 
		width: 80px
	#login
		width:100%
		height:40px
		text-align:center
		line-height:40px
		color:#fff
.index_middle
	/*background-color:#fac*/
	#nav
		width:100%
		padding-top:30px
		a
			font-size:18px
			font-weight: 600
		.router-link-active
			color:#ede06b
		.router-link-exact-active
			color:#ede06b
		div
			text-align:right
			width:85%
		div:nth-child(n+2)
			margin-top:20px
.index_bottom
	/**background-color:#fab*/
	.note
		position:absolute
		color:#fff
		font-size:0.8em
		text-align:center
		width: 20%
		bottom:80px
	.note:last-child
		bottom:50px
</style>
